﻿<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="UTF-8" />
		<title>表单事件之复选框应用案例</title>
	</head>

	<body>
		<form>
			<table id="listTbl">
				<tr>
					<td><input type="checkbox" id="sel"></td>
					<td>全选</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="chk[]" value="1"></td>
					<td>A</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="chk[]" value="2"></td>
					<td>B</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="chk[]" checked value="3"></td>
					<td>C</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="chk[]" value="4"></td>
					<td>D</td>
				</tr>
			</table>
			<button id="getval" type="button">获取所有选种值</button>
		</form>
		<script type="text/javascript">
			var chk = document.getElementsByName("chk[]");
			var sel = document.getElementById("sel");
			var getval = document.getElementById("getval");

			//全选或全不选
			sel.onchange = function(ev) {
				for(var i = 0; i < chk.length; i++) {
					chk[i].checked = sel.checked;
				}
			}
 
 
			//获取被选中元素的值
			getval.onclick = function() {
				console.log("你选种了以下几个---")
				for(var i = 0; i < chk.length; i++) {
					if(chk[i].checked)
						console.log(chk[i].value);
				}
			}

			/*
				document.writeln(chk[i].value);  //获取复选框值的方法
				chk[i].checked= "checked";	  //设置复选框为被选中状态,"checked"也可以换用true进行设置
				if(chk[i].checked)			//如果元素被选中这个结果是true否则是false
				
				说明：复选框在实际项目中经常用到，主要用途
				1、全选或全部选
				2、部分选择
				3、获取选定的值
				4、判断是否在选择状态
				5、下面如果有一个没选中，全选自动去掉对勾，如果全部选中自动加上对勾
			*/
		</script>
	</body>

</html>